<template>

  <card-component
    :content-title="contentTitle"
    :page="page"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange">

    <div slot="action">
      <action-componet
        :device-choose="deviceChoose"
        :device-list="deviceList"
        :user-choose="userChoose"
        :user-list="userList"
        :stand-choose="standChoose"
        :stand-list="standList"
        :begin-date="beginDate"
        :over-date="overDate"
        :chanxian='chanxian'
        :program="program"

        :isShowDeleteButton="isShowDeleteButton"
        :isDeleteBtnLoading="isDeleteBtnLoading"
        :isShowCancelLightButton="isShowCancelLightButton"
        :isCancelLightBtnLoading="isCancelLightBtnLoading"
        :showDeleteFilterButton="showDeleteFilterButton"

        @updateValue="updateValue"
        @searchData="searchData"
        @confrimDialog="confrimDialog"
        @deleteSelectionData="deleteSelectionData"
        @cancelLightSelectionData="cancelLightSelectionData"
        @deleteFilterRecord="deleteFilterRecord"></action-componet>

      <!--<el-button class='el-button-delete-data' :loading="isDeleteBtnLoading" type="danger" v-show="isShowDeleteButton"-->
      <!--@click="deleteSelectionData">删除勾选的数据-->
      <!--</el-button>-->

      <!--<el-button class='el-button-delete-data' :loading="isCancelLightBtnLoading" type="primary"-->
      <!--v-show="isShowCancelLightButton"-->
      <!--@click="cancelLightSelectionData">取消高亮-->
      <!--</el-button>-->
    </div>


    <table-component slot="table"
                     :table-header="tableHeader"
                     :table-data="tableData"
                     :page="page"
                     @handleEdit="handleEdit"
                     @handleDelete="handleDelete"
                     @handleSelectionChange="handleSelectionChange"
                     @handleSizeChange="handleSizeChange"
                     @handleCurrentChange="handleCurrentChange"></table-component>

  </card-component>

</template>

<script>

  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import action from '@/base/action.vue'
  import request from '@/common/js/request'
  import util from '@/common/js/util'

  export default {
    data() {
      return {
        chanxian: '',
        contentTitle: this.$getTextByLangKey('扫描记录'),

        program: '',
        deviceList: [],
        deviceChoose: '',
        userList: [],
        userChoose: '',
        standList: [],
        standChoose: '',
        beginDate: '',
        overDate: '',

//
        multipleSelection: [],//勾选的数据
        isShowDeleteButton: false,
        isDeleteBtnLoading: false,
        isShowCancelLightButton: false,
        isCancelLightBtnLoading: false,
        showDeleteFilterButton: false,
//
        tableHeader: [],
        tableData: [],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 20,
        },


        //        这是实现自动刷新功能的
        timer: '',
        isRequesting: false


      }
    },
    created: function () {

      this.fetchData()
    },

    destroyed: function () {
      this.stopTimer()
      console.log('---- destroyed ----')
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {

      deleteFilterRecord() {
        request.requestDeleteExportScanList(this.chanxian, this.program, this.deviceChoose, this.standChoose, this.beginDate.getTime(), this.overDate.getTime(), res => {
          util.showSuccessToast(this.$getTextByLangKey('删除成功'))

          request.requestScanList(this.chanxian, this.program, 1, 20, this.deviceChoose, this.standChoose, this.beginDate ? this.beginDate.getTime() : this.beginDate, this.overDate ? this.overDate.getTime() : this.overDate, res => {
            this.tableHeader = this.makeScanHeader(res.data.data.header)
            this.tableData = this.makeScanList(res.data.data.list)
          })

        })
      },


      fetchData: function () {
        this.stopTimer()

        this.chanxian = this.$route.query.chanxian
        this.program = this.$route.query.program

        this.contentTitle = this.program + this.$getTextByLangKey('扫描记录')
        request.requestScanListFilter(this.chanxian, res => {
          this.deviceList = res.data.data.equis
          this.standList = res.data.data.posi
        })

        this.creatTimer()
      },

      creatTimer: function () {
        this.autoRequest()
        this.timer = setInterval(() => {
          if (!this.isRequesting) {
//            console.log('开始自动请求')
            this.autoRequest()
          } else {
//            console.log('请求结果未返回')
          }
        }, 1500)
      },
      stopTimer: function () {
        clearTimeout(this.timer)
        this.isRequesting = false
      },

      autoRequest: function () {

        console.log('扫描记录自动请求')
        this.isRequesting = true
        request.requestScanList(this.chanxian, this.program, this.page.currentPage, 20, this.deviceChoose, this.standChoose, this.beginDate ? this.beginDate.getTime() : this.beginDate, this.overDate ? this.overDate.getTime() : this.overDate,
          res => {
            this.isRequesting = false

            if (this.multipleSelection.length > 0) {
              console.log('--勾选数据，不刷新数据')
            } else {
              console.log('--刷新扫描记录')
              this.tableHeader = this.makeScanHeader(res.data.data.header)
              this.tableData = this.makeScanList(res.data.data.list)

//              this.page.currentPage = res.data.data.pageNum
              this.page.total = res.data.data.total
              this.page.pageSize = res.data.data.pageSize
            }

          },
          res => {
            this.isRequesting = false
          })
      },


      handleEdit: function (index, row) {
        this.$emit('handleEdit', index, row)
      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        console.log('gggggggg')
      },

      handleCurrentChange: function (val) {
        this.page.currentPage = val
//        request.requestScanList(this.chanxian, this.program, this.page.currentPage, 20, this.deviceChoose, this.standChoose, this.beginDate, this.overDate, res => {
//          this.tableHeader = this.makeScanHeader(res.data.data.header)
//          this.tableData = this.makeScanList(res.data.data.list)
//        })

        this.autoRequest()
      },

      handleSelectionChange(val) {
        if (val.length > 0) {
          this.isShowDeleteButton = true
          this.isShowCancelLightButton = true
        } else {
          this.isShowDeleteButton = false
          this.isShowCancelLightButton = false
        }

        this.multipleSelection = val

//        console.log(this.multipleSelection)

      },

      deleteSelectionData() {

//        console.log('deleteSelectionData')
        this.isDeleteBtnLoading = true
        var ids = []
        this.multipleSelection.forEach(function (item) {
          ids.push(item.id)
        })
        request.requestDeleteScanList(ids, (res) => {
          util.showSuccessToast(this.$getTextByLangKey('删除成功'))
          request.requestScanList(this.chanxian, this.program, this.page.currentPage, 20, this.deviceChoose, this.standChoose, this.beginDate, this.overDate, res => {
            this.tableHeader = this.makeScanHeader(res.data.data.header)
            this.tableData = this.makeScanList(res.data.data.list)
          })

        }, (err) => {

        }, () => {
          this.isDeleteBtnLoading = false
        })
      },

      cancelLightSelectionData() {

        console.log('cancelLightSelectionData')
        this.isCancelLightBtnLoading = true
        var ids = []
        this.multipleSelection.forEach(function (item) {
          ids.push(item.id)
        })
        request.requestCancelHighLightScanList(ids, (res) => {
          util.showSuccessToast(this.$getTextByLangKey('操作成功'))
          request.requestScanList(this.chanxian, this.program, this.page.currentPage, 20, this.deviceChoose, this.standChoose, this.beginDate, this.overDate, res => {
            this.tableHeader = this.makeScanHeader(res.data.data.header)
            this.tableData = this.makeScanList(res.data.data.list)
          })

        }, (err) => {

        }, () => {
          this.isCancelLightBtnLoading = false
        })

      },

      updateValue: function (type, value) {
        switch (type) {
          case 'updateDeviceChoose':
            this.deviceChoose = value;
            break
          case 'updateUserChoose':
            this.userChoose = value;
            break
          case 'updateStandChoose':
            this.standChoose = value;
            break
          case 'updateBeginDate':
            this.beginDate = value;
            break
          case 'updateOverDate':
            this.overDate = value;
            break
        }

        this.showDeleteFilterButton = this.beginDate && this.overDate
        this.searchData()

      },
      searchData: function () {
        //这里有问题的，需要重新请求该筛选条件下的第一页数据
        if (this.page.currentPage !== 1) {
          //回到首页，因为页面会自动监听到页面变化，所以会自动请求首页数据
          this.page.currentPage = 1
        } else {
          request.requestScanList(this.chanxian, this.program, 1, 20, this.deviceChoose, this.standChoose, this.beginDate ? this.beginDate.getTime() : this.beginDate, this.overDate ? this.overDate.getTime() : this.overDate, res => {
            this.tableHeader = this.makeScanHeader(res.data.data.header)
            this.tableData = this.makeScanList(res.data.data.list)
          })

        }

      },

      confrimDialog: function (excelForm) {
        request.requestExportScanList(this.chanxian, this.program, this.deviceChoose, this.standChoose, this.beginDate.getTime(), this.overDate.getTime(), excelForm, res => {
          util.showSuccessToast(this.$getTextByLangKey('导出成功，正在生成文件'))
          util.downLoadFile('.' + res.data.data.path)
        })


      },


      makeScanHeader: function (list) {

        let indexItem = {
          type: 'index', isShow: true,
          width: '65', label: 'NO.',
        }
        let selectionItem = {
          type: 'selection', isShow: true
        }
//        var header = [selectionItem, indexItem]
        var header = [selectionItem]
        list.forEach(function (item) {
          item.isShow = true

          if(item.prop === 'rightCode1'||item.prop === 'rightCode2'||item.prop === 'rightCode3'||item.prop === 'rightCode4'||item.prop === 'rightCode5'||item.prop === 'scanCode'){
            item.width = '200'
          }
          header.push(item)
        }, this)
        return header
      },


      makeScanList: function (list) {

        var data = []
        list.forEach(function (item) {
          item.scanTime = this.getTimeToDate(item.scanTime)
          item.verifyTime = this.getTimeToDate(item.verifyTime)

          if (item.verifyResult) {
            item.verifyResult = this.$getTextByLangKey('是')
          } else {
            item.verifyResult = this.$getTextByLangKey('否')
          }


          if (item.verifyResult) {
            item.verifyResult = this.$getTextByLangKey('是')
          } else {
            item.verifyResult = this.$getTextByLangKey('否')
          }

          if (item.isVerify) {
            item.isVerify = this.$getTextByLangKey('是')
          } else {
            item.isVerify = this.$getTextByLangKey('否')
          }
          data.push(item)
        }, this)
        return data

      },

      getTimeToDate: function (time) {

        if (time != null) {
          var date = new Date(time)
          return date.toLocaleDateString() + ' ' + date.toTimeString().split(' ')[0]
        }

        return ''

      },
    },
    components: {
      'card-component': card,
      'table-component': table,
      'action-componet': action,
    },

  }
</script>


<style scoped>
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
  }
</style>


